<template>
	<view>
		<view class="head content">
			<view class="top-row">
				<view class="left">
					<image src="/static/icon/phone1.jpg" mode="aspectFill"></image>
					<view>
						<view class="name">{{ info.name || '' }}</view>
						<view @click="toSelect">重新选择机型估价</view>
					</view>
				</view>
				<view class="right">
					<view class="problem">预估价</view>
					<text>{{ info.amount }}</text>
				</view>
			</view>

			<view class="list">
				<view v-for="(item, index) in info.list" :key="index">
					<text v-if="item.selected !== ''">{{ item.title }}：{{ item.options[item.selected].key }}</text>
				</view>
			</view>
		</view>

		<uni-collapse show-arrow show-animation v-model="collapse">
			<uni-collapse-item title="微信客服">
				<view class="qr-code">
					<view class="left">
						<image class="icon" src="/static/icon/kf.png" mode="aspectFill"></image>
						<view>
							<view class="subtitle">扫二维码联系专项客服</view>
							<view>电话咨询：{{ customerService.mobile }}</view>
						</view>
					</view>
					<image class="code" :src="customerService.image" mode="aspectFill"></image>
				</view>
			</uni-collapse-item>
			<uni-collapse-item title="自行邮寄">
				<view class="address">
					<view class="msg">
						<view class="box-e mb-16">
							<view class="title">寄件地址</view>
							<view class="f28 c-blue" @click="copy">复制</view>
						</view>
						<view>{{ address.address || '--' }}</view>
						<view class="mt-8">{{ address.mobile || '--' }}(电话)-{{ address.name || '--' }}(收货人)</view>
					</view>
					<div class="title mt-32">寄货请用一张纸条写好以下信息:</div>
					<view class="card">
						<view>收件人：xxxx (写自己的微信号)</view>
						<view>电话：xxxxxxxxxxx (写自己的联系电话)</view>
						<view>手机串号：xxxxxxxxxxxxxxxx (拨号盘输入*#06#，或者设置-通用-关于本机的IMMEI)</view>
					</view>
				</view>
			</uni-collapse-item>
			<uni-collapse-item title="收款信息" v-show="examine">
				<view class="pay">
					<view class="pay-type">
						<view class="item" :class="{ active: payType == 1 }" @click="payType = 1">
							<image style="height: 60rpx" src="/static/icon/zfb.png" mode="aspectFit"></image>
							<view>
								<view class="blod">支付宝</view>
								<text>2小时到账</text>
							</view>
						</view>
						<view class="item" :class="{ active: payType == 2 }" @click="payType = 2">
							<image src="/static/icon/yl.png" mode="aspectFit"></image>
							<view>
								<view class="blod">银行卡</view>
								<text>12小时到账</text>
							</view>
						</view>
					</view>

					<view class="row" v-if="payType != 1">
						<view>收款银行:</view>
						<input type="text" v-model="formData.bankname" maxlength="20" placeholder="输入收款银行" />
					</view>

					<view class="row">
						<view>收款账号:</view>
						<input type="text" v-model="formData.payaccount" maxlength="20" placeholder="收款账号,非常重要请认真埴写" />
					</view>
					<view class="row">
						<view>收款人:</view>
						<input type="text" v-model="formData.payaname" maxlength="20" placeholder="请务必输入真实姓名,以便打款" />
					</view>
					<view class="row">
						<view>联系电话:</view>
						<input type="text" v-model="formData.mobile" maxlength="11" placeholder="输入联系电话" />
					</view>
					<!-- <view class="row row2">
						<view>短信验证:</view>
						<input type="text" placeholder="输入短信验证码" />
						<view class="btn">发送短信</view>
					</view> -->

					<view class="msg">
						<view>请保持电话畅通，以免回收人员需要联系时联系不上</view>
						<view>打开支付宝-设置-隐私-常用隐私设置-允许通过手机号找到我，若未设置会影响打款时效。</view>
					</view>
				</view>
			</uni-collapse-item>

			<uni-collapse-item title="订单备注">
				<view class="remark">
					<view class="row">
						<view>IMEL:</view>
						<input type="text" v-model="formData.imel" maxlength="50" placeholder="IMEI/*#06#或通用->关于本机[必埴项]" />
					</view>
					<view class="row">
						<view>备注:</view>
						<input type="text" v-model="formData.desc" maxlength="50" placeholder="备注/微信号/可不埴" />
					</view>
					<!-- <view class="row">
						<view >推荐人:</view>
						<input type="text" v-model="formData.desc" placeholder="可放空不埴写" />
					</view> -->
				</view>
			</uni-collapse-item>
		</uni-collapse>

		<view class="f30 agreement">
			<checkbox v-model="agreementStatus" @click="selectAgreementStatus"></checkbox>
			我已阅读并同意
			<text class="c-blue" @click="$api.navTo('/pages/user/agreement?type=1')">《服务条款》</text>
			<text class="c-blue" @click="$api.navTo('/pages/user/agreement?type=2')">《旧机回收协议》</text>
		</view>

		<view class="footer">
			<view class="btn" @click="submit">立即下单</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			collapse: ['0', '1', '2', '3'],
			payType: '1',
			info: {
				name: '',
				list: []
			},
			address: {
				address: '',
				id: '',
				mobile: '',
				name: ''
			},
			formData: {
				bankname: '',
				payaccount: '',
				payaname: '',
				mobile: '',
				imel: '',
				desc: ''
			},
			agreementStatus: '',
			customerService: {
				image: '',
				mobile: ''
			},
			examine: 0
		};
	},
	onShow: function () {
		this.getExamine();
		this.info = uni.getStorageSync('GoodsInfo');
		this.customerService = uni.getStorageSync('CustomerService');
		console.log(this.info);
		this.getAddress();
	},
	methods: {
		// 获取是否审核
		async getExamine() {
			const data = await this.$api.request('/base/toverify', 'GET');
			console.log(data);
			this.examine = data.verify;
		},
		// 获取地址信息
		async getAddress(id) {
			const data = await this.$api.request('/base/getaddress', 'POST');
			this.address = data;
		},
		// 复制文本
		copy() {
			uni.setClipboardData({
				data: `${this.address.address} ${this.address.mobile} ${this.address.name}`
			});
		},
		// 提交
		async submit(id) {
			if (!this.check()) return;
			const list = this.info.list.map((item) => {
				try {
					return item.options[item.selected].key;
				} catch (error) {
					//TODO handle the exception
				}
			});
			const data = await this.$api.request('/Backorder/submits', 'POST', {
				...this.formData,
				backgood_id: this.info.id,
				info: list.filter(Boolean).join(','), //机器选择的描述
				money: this.info.maxmoney, //最高价格
				amount: this.info.amount, //预估价格
				paytype: this.payType
			});
			this.tips('订单提交成功！');
			setTimeout(() => {
				uni.navigateBack({
					delta: 2
				});
			}, 500);
		},

		// 校验
		check() {
			if (this.examine) {
				if (this.payType == 2 && !this.formData.bankname) {
					this.tips('请输入银行名称！');
					return false;
				}
				if (!this.formData.payaccount) {
					this.tips('请输入收款账号！');
					return false;
				}
				if (!this.formData.payaname) {
					this.tips('请输入收款人！');
					return false;
				}
				if (!this.formData.mobile) {
					this.tips('请输入联系电话！');
					return false;
				}
			}
			if (!this.formData.imel) {
				this.tips('请输入本机IMEL！');
				return false;
			}
			if (!this.agreementStatus) {
				this.tips('请同意服务条款以及回收协议！');
				return false;
			}
			return true;
		},

		// 提示
		tips(text) {
			uni.showToast({
				title: text,
				icon: 'none'
			});
		},

		// 协议 同意
		selectAgreementStatus(option) {
			this.agreementStatus = this.agreementStatus ? '' : '1';
		},
		toSelect() {
			uni.navigateBack({
				delta: 2
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	background-color: #fff;
	border-radius: 18rpx;
	margin-bottom: 20rpx;
	padding: 20rpx;
}

.footer {
	background-color: #fff;
	position: fixed;
	width: 100%;
	bottom: var(--window-bottom);
	left: 0;
	padding: 20rpx 0;

	.btn {
		margin: auto;
		width: 300rpx;
		background-color: $main-color;
		text-align: center;
		color: #fff;
		border-radius: 99rpx;
		font-weight: 600;
		padding: 18rpx 0;
	}
}

.agreement {
	padding-bottom: 188rpx;

	::v-deep .uni-checkbox-input {
		width: 17px;
		height: 17px;
	}
}

.pay {
	padding: 0 30rpx 30rpx;

	.pay-type {
		display: flex;
		justify-content: center;
		column-gap: 30rpx;
		margin-bottom: 20rpx;

		.item {
			flex: 1;
			padding: 15rpx 10rpx;
			background-color: rgb(245, 246, 251);
			border: 5rpx solid rgb(245, 246, 251);
			border-radius: 18rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			column-gap: 12rpx;
			box-sizing: border-box;

			image {
				width: 80rpx;
				height: 80rpx;
			}

			text {
				font-size: 16rpx;
				color: #999;
			}
		}

		.active {
			border: 5rpx solid rgb(110, 156, 248);
		}
	}

	.row {
		display: grid;
		grid-template-columns: 150rpx 1fr;
		padding: 10rpx 0rpx;
		font-size: 30rpx;

		input {
			font-size: 30rpx;
		}
	}

	.row2 {
		grid-template-columns: 150rpx 1fr 150rpx;

		.btn {
			background-color: $main-color;
			color: #fff;
			text-align: center;
			font-size: 16rpx;
			border-radius: 10rpx;
			height: 50rpx;
			line-height: 50rpx;
		}
	}

	.msg {
		font-size: 26rpx;
		margin-top: 30rpx;

		> view {
			padding-left: 20rpx;
			position: relative;
			line-height: 160%;
			color: #666;

			&::before {
				content: '●';
				color: $main-color;
				margin-right: 3rpx;
				position: absolute;
				left: -5rpx;
			}
		}
	}
}

.remark {
	padding-bottom: 20rpx;

	.row {
		display: grid;
		grid-template-columns: 120rpx 1fr;
		padding: 10rpx 30rpx;
		font-size: 30rpx;

		input {
			font-size: 30rpx;
		}
	}
}

.address {
	padding: 0 30rpx 30rpx;
	font-size: 30rpx;
	line-height: 150%;

	.title {
		font-size: 30rpx;
		font-weight: 600;
	}

	.card {
		background-color: #f5f5f5;
		padding: 20rpx;
		margin-top: 16rpx;
		border-radius: 18rpx;
		color: #666;
		font-size: 26rpx;
	}
}

::v-deep .uni-collapse {
	background-color: transparent;

	.uni-collapse-item {
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 18rpx;
		overflow: hidden;

		.uni-collapse-item__title {
			border: none;

			.uni-collapse-item__title-text {
				font-size: 32rpx;
				font-weight: 600;

				&::before {
					width: 15rpx;
					background-color: $main-color;
					color: $main-color;
					margin-right: 15rpx;
					content: '.';
					height: 20rpx;
					border-radius: 99rpx;
				}
			}
		}
	}
}

.qr-code {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0rpx 30rpx 20rpx;

	.left {
		font-size: 24rpx;
		color: #999;
		flex: 1;
		display: flex;
		align-items: center;
		column-gap: 20rpx;

		.icon {
			width: 100rpx;
			height: 100rpx;
		}

		.subtitle {
			font-size: 28rpx;
			font-weight: 600;
			margin-bottom: 10rpx;
		}
	}

	.code {
		width: 160rpx;
		height: 160rpx;
	}
}

.head {
	.list {
		font-size: 30rpx;
		margin-top: 30rpx;
		color: #333;

		> view {
			margin-top: 15rpx;
		}
	}

	.top-row {
		display: grid;
		grid-template-columns: 1fr 140rpx;
		column-gap: 20rpx;

		.left {
			display: grid;
			grid-template-columns: 80rpx 1fr;
			column-gap: 12rpx;
			font-size: 28rpx;
			color: #666;

			.name {
				font-size: 40rpx;
				color: #333;
				font-weight: 600;
				margin-bottom: 16rpx;
			}

			image {
				width: 80rpx;
				height: 125rpx;
			}
		}

		.right {
			font-size: 30rpx;
			text-align: right;

			.problem {
				display: flex;
				align-items: center;

				&::after {
					content: '?';
					background-color: $main-color;
					color: #fff;
					width: 32rpx;
					height: 32rpx;
					text-align: center;
					line-height: 36rpx;
					border-radius: 99rpx;
					display: inline-block;
					margin-left: 8rpx;
				}
			}

			text {
				font-size: 50rpx;
				color: $main-color;
				margin-top: 10rpx;
			}
		}
	}
}

::v-deep .uni-collapse-item__wrap-content.uni-collapse-item--border {
	border-bottom-color: #fff;
}
</style>

<style>
page {
	background-color: #f5f5f5;
	padding: 20rpx;
}
</style>
